<template>
  <div id="blog_all">
    <header>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }"> homepage </el-breadcrumb-item>
        <el-breadcrumb-item>{{ title }}</el-breadcrumb-item>
      </el-breadcrumb>
      <div style="display: flex">
        <!-- <div class="icon" @click="updateShow1 = true">添加</div> -->
        <div class="icon" @click="handleSelectClose">筛选</div>
      </div>
    </header>
    <!-- 筛选 -->
    <div class="select" ref="select">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="订单编号">
              <el-input v-model="formInline._id" placeholder="订单编号" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="收件人">
              <el-input v-model="formInline.au" placeholder="收件人" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="电话">
              <el-input v-model="formInline.phone" placeholder="电话" clearable />
            </el-form-item>
          </el-col>
        </el-row>
        <!-- <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="用户地址">
              <el-input v-model="formInline.address" placeholder="用户地址" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="数量">
              <el-input v-model="formInline.num" placeholder="数量" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="价格">
              <el-input v-model="formInline.price" placeholder="价格" clearable />
            </el-form-item>
          </el-col>
        </el-row> -->
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="订单状态">
              <el-select v-model="formInline.state" clearable placeholder="订单状态">
                <el-option label="已付款" value="已付款"></el-option>
                <el-option label="待发货" value="待发货"></el-option>
                <el-option label="待收货" value="待收货"></el-option>
                <el-option label="退款/售后" value="退款/售后"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item>
          <el-button type="primary" @click="formSubmit">查询</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div class="main">
      <div class="table-container">
        <table border="1">
          <thead>
            <tr >
              <th>订单编号</th>
              <th>用户id</th>
              <th>收件人</th>
              <th>电话</th>
              <th>用户地址</th>
              <!-- <th>数量</th> -->
              <!-- <th>单价/总价</th> -->
              <th>购买日期</th>
              <th>订单状态</th>
              <th style="text-align: center">操作</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="post in Orderdata" :key="post._id">
              <td>{{ post._id }}</td>
              <td>{{ post.userid }}</td>
              <td>{{ post.au }}</td>
              <td>{{ post.phone }}</td>
              <td>{{ post.address.region }} {{ post.address.detailAddress }}</td>
              <!-- <td>{{ post.num }}</td> -->
              <!-- <td style="text-align: center">
                {{ post.price }}￥ &nbsp;/&nbsp;&nbsp;{{ post.price * post.num }}￥
              </td> -->
              <td>{{ post.publishedAt }}</td>
              <td>{{ post.state }}</td>
              <td class="btntd">
                <div class="btn">

                  <el-button link type="primary" size="small" @click="del(post._id)"><el-icon size="14rem">
                      <Delete />
                    </el-icon></el-button>
                  <el-button link type="primary" size="small" @click="modify(post._id)"><el-icon size="14rem">
                      <Edit />
                    </el-icon></el-button>
                  </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>

    <el-drawer v-model="updateShow2" title="修改订单" :direction="direction" size="50%" :before-close="handleClose2">
      <UpdateOrder @handleDraewr="handleDrawer" :filterNew="filterNew" :key="filterNew?._id"></UpdateOrder>
    </el-drawer>
    <!-- 添加 -->
    <el-drawer v-model="updateShow1" title="添加订单" :direction="direction" size="50%" :before-close="handleClose">
      <UpdateOrder @handleDraewr="handleDrawer"></UpdateOrder>
    </el-drawer>
  </div>
</template>

<script setup>
import { Order, delOrder, selectOrder } from '@/utils/zgf-axios'
import UpdateOrder from '@/components/order/UpdateOrder.vue'
import { nextTick, ref, useTemplateRef, watch } from 'vue'
import { ElMessageBox } from 'element-plus'

const updateShow1 = ref(false)
const updateShow2 = ref(false)
const filterNew = ref(false)
const direction = ref('rtl')

const Orderdata = ref([])

Order().then((res) => {
  Orderdata.value = res.data.orderResult
  console.log('thisOrder', Orderdata.value)
})

const handleDrawer = () => {
  updateShow1.value = false
  updateShow2.value = false
  Order().then((res) => {
    Orderdata.value = res.data.orderResult
  })
}
const modify = (id) => {
  updateShow2.value = true
  filterNew.value = Orderdata.value.find((item) => item._id == id)
  console.log('修改', filterNew.value)
}
const handleClose = (done) => {
  ElMessageBox.confirm('订单还未添加，是否退出?')
    .then(() => {
      done()
    })
    .catch(() => {
      // catch error
    })
}
// 修改Order
const handleClose2 = (done) => {
  ElMessageBox.confirm('订单还未修改，是否退出?')
    .then(() => {
      done()
    })
    .catch(() => {
      // catch error
    })
}
const del = async (id) => {
  await delOrder(id)
  Order().then((res) => {
    Orderdata.value = res.data.orderResult
  })
}

// 表格标题
const title = '订单列表'

// 筛选
const select = useTemplateRef('select')
const flag = ref(false)
const handleSelectClose = () => {
  flag.value = !flag.value
  if (flag.value) {
    select.value.style.height = '145rem'
    select.value.style.visibility = 'inherit'
    select.value.style.opacity = '1'
  } else {
    select.value.style.height = '0'
    select.value.style.visibility = 'hidden'
    select.value.style.opacity = '0'
  }
}

const formInline = ref({
  title: '',
  au: '',
  phone: '',
  state: '',
  address: '',
  num: '',
  price: '',
})

const formSubmit = () => {
  const { title, au, phone, state, address, num, price } = formInline.value
  selectOrder(title, au, phone, state, address, num, price).then((res) => {
    Orderdata.value = res.data.list
    console.log(res.data.list)

    // total.value = res.data
  })
}
</script>


<style scoped lang="less">
@import url(../../css/icon.css);
@theme-color: #409eff;

header {
  padding: 10rem 30rem 0;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .icon {
    padding: 5rem 10rem;
    color: #409eff;
    border-radius: 4rem;
    margin-left: 8rem;
    font-size: 12rem;
  }
}

.select {
  height: 0;
  visibility: hidden;
  opacity: 0;
  margin: 8rem 20rem;
  padding: 0 20rem;
  background-color: #fff;
  border-radius: 10rem;
  transition: all 1s;
}

#blog_all {
  width: 100%;
}

.main {
  z-index: 99;
  @theme-color: #f8f9fa;

  .table-container {
    margin: 20rem;
    font-family: 'Arial', sans-serif;
  }

  h2 {
    color: @theme-color;
    font-size: 24rem;
    margin-bottom: 18rem;
    display: flex;
    justify-content: space-between;

    .add {
      font-size: 20rem;

      button {
        padding: 6rem 12rem;
        border: none;
        cursor: pointer;
        border-radius: 4rem;
        font-size: 18rem;
        transition: background-color 0.3s;
        background-color: #409eff;
        color: white;
      }
    }
  }

  table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10rem;
    background-color: #fff;
    box-shadow: 0 4rem 10rem rgba(0, 0, 0, 0.05);
    border-radius: 8rem;
    overflow: hidden;
  }

  th,
  td {
    padding: 6rem 12rem;
    font-size: 10rem;
    text-align: left;
    border: 1rem solid #e0e0e0;
  }

  .btntd {
    padding: 6rem 0;
  }

  th {
    background-color: @theme-color;
    color: #9c9c9c;
    font-weight: 600;
    font-size: 14rem;
  }

  tbody tr:nth-child(even) {
    background-color: #f7f7f7;
  }

  tbody tr:hover {
    background-color: #f1f1f1;
  }

  tbody {
    .btn {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: space-evenly;

      .del {
        background-color: #ff4d4f;
        color: white;
      }

      .one {
        // background-color: #16ceaf;
        color: rgb(0, 0, 0);
      }
    }
  }

  button {
    padding: 3rem 5rem;
    border: none;
    cursor: pointer;
    border-radius: 4rem;
    font-size: 10rem;
    transition: background-color 0.3s;
  }

  .edit-btn {
    background-color: @theme-color;
    color: #fff;
    margin-right: 8rem;

    &:hover {
      background-color: darken(@theme-color, 10%);
    }
  }

  .delete-btn {
    background-color: #ff4d4f;
    color: #fff;

    &:hover {
      background-color: darken(#ff4d4f, 10%);
    }
  }
}

.pagination {
  width: 96%;
  display: flex;
  padding: 0 20rem;
  justify-content: end;
}

.el-form--inline .el-form-item {
  width: 100%;
}

.el-button,
.el-button.is-round {
  margin: auto;
  padding: 0 26rem;
}

.el-form {
  padding-top: 15rem;
}
th{
  background-color: white !important;
  font-size: 10rem !important;
  // font-weight: 500!important;
}

td{
  background-color: white !important;
  font-size: 10rem !important;
  color: #666 !important;
}
th, td {
  border-left: none !important;
  border-right: none !important;
}
</style>
